<template>
    <!-- 薪资项目页 -->
    <div>
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple-dark">
            <el-row style="padding-top: 25px; padding-left: 20px">
              <el-button type="primary" @click="AddPayrollItems"
                >新建薪资项目</el-button
              >
              <el-button class="file-box" text>
                              <input type="file"  class="file-btn"
                                  ref="file"
                                  @click="e => {e.target.value = '';} "
                                  @change="importPoi"/>导入  
                          </el-button>
              <el-button @click="exprotPayrollItems" >导出</el-button>
              <div style="display: inline; position: relative; left: 630px">
                <el-input
                  style="width: 200px"
                  placeholder="请输入关键字"
                  prefix-icon="el-icon-search"
                  v-model="form.projectName"
                  @keyup.enter.native="search"
                >
                </el-input>
              </div>
            </el-row>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div
            class="grid-content bg-purple-dark-two"
            style="padding-top: 20px; padding-left: 20px"
          >
            <el-table :data="dataList" border="true" style="width: 99%">
              <el-table-column
                prop="projectName"
                label="薪资项"
                width="190"
              ></el-table-column>
              <el-table-column prop="projectType" label="薪资类型" width="190">
                <template slot-scope="scope">
                  {{
                    scope.row.projectType == 1
                      ? "税前加项"
                      : scope.row.projectType == 2
                      ? "税前减项"
                      : scope.row.projectType == 3
                      ? "税费项"
                      : scope.row.projectType == 4
                      ? "税后加项"
                      : scope.row.projectType == 5
                      ? "税后减项"
                      : scope.row.projectType == 6
                      ? "统计项"
                      : "其他项"
                  }}
                </template>
              </el-table-column>
              <el-table-column prop="roundingRules" label="舍入方式" width="140">
                <template slot-scope="scope">
                  {{
                    scope.row.roundingRules == 1
                      ? "原始数据"
                      : scope.row.roundingRules == 2
                      ? "四舍五入"
                      : scope.row.roundingRules == 3
                      ? "向上舍入数字"
                      : "向下舍入数字"
                  }}
                </template>
              </el-table-column>
              <el-table-column prop="retain" label="保留小数位" width="140">
              </el-table-column>
              <el-table-column prop="state" label="状态" width="150">
                <template slot-scope="scope">
                  {{ scope.row.state == 1 ? "启用" : "禁用" }}
                </template>
              </el-table-column>
              <el-table-column prop="remark" label="备注" width="190">
              </el-table-column>
              <el-table-column fixed="right" label="操作" width="150">
                <template slot-scope="scope">
                  <el-button
                    @click.native.prevent="findPayrollItems(scope.row.id)"
                    type="text"
                  >
                    修改
                  </el-button>
                  <el-button
                    @click.native.prevent="deletePayrollItems(scope.$index, scope.row)"
                    type="text"
                  >
                    删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
            <!-- 分页器 -->
            <div class="block" style="margin-top: 15px">
              <el-pagination
                align="center"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="form.currentPage"
                :page-sizes="[2, 5, 10, 20]"
                :page-size="form.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
              >
              </el-pagination>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-dialog
        :title="title"
        :visible.sync="dialogVisible"
        width="50%"
        :before-close="handleClose"
      >
        <el-form ref="form" :model="formData" label-width="80px">
          <el-form-item label="项目名称">
            <el-input v-model="formData.projectName"></el-input>
          </el-form-item>
          <el-form-item label="项目类型">
            <el-select v-model="formData.projectType" placeholder="请选择">
              <el-option label="税前加项" value="1"></el-option>
              <el-option label="税前减项" value="2"></el-option>
              <el-option label="税费项" value="3"></el-option>
              <el-option label="税后加项" value="4"></el-option>
              <el-option label="税后减项" value="5"></el-option>
              <el-option label="统计项" value="6"></el-option>
              <el-option label="其他项" value="7"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="舍入规则">
            <el-select v-model="formData.roundingRules" placeholder="请选择">
              <el-option label="原始数据" value="1"></el-option>
              <el-option label="四舍五入" value="2"></el-option>
              <el-option label="向上舍入数字" value="3"></el-option>
              <el-option label="向下舍入数字" value="4"></el-option>
            </el-select>
            <span v-show="formData.roundingRules == 2">
              保留
              <el-input v-model="formData.retain" style="width: 60px"></el-input
              >位小数
            </span>
          </el-form-item>
          <el-form-item label="备注">
            <el-input type="textarea" v-model="formData.remark"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">{{ sub }}</el-button>
            <el-button @click="cancel">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </template>
    
    <script>
  import axios from "axios";
  export default {
    data() {
      return {
        form: {
          currentPage: 1,
          pageSize: 5,
          projectName: "",
        },
        formData: {
          id: undefined,
          projectName: "",
          projectType: "",
          roundingRules: "",
          retain: "",
          remark: "",
        },
        dialogVisible: false,
        title: "添加项目",
        total: 0,
        dataList: [],
        sub: "创建项目",
      };
    },
    created() {
      this.getPayrollItemsList();
    },
    methods: {
      //查询方法 分页 调查，
      AddPayrollItems() {
        this.dialogVisible = true;
        this.sub = "创建项目";
        this.title = "添加项目";
      },
      // 获取薪资方案列表
      search() {
        this.getPayrollItemsList();
      },
      onSubmit() {
        if (this.formData.id === undefined) {
          this.$http
            .post("payrollItems/addPayrollItem", this.formData)
            .then((res) => {
              if (res.data.code === 200) {
                this.getPayrollItemsList();
                this.cancel();
              } else {
                this.$message.error(res.data.data);
              }
            });
        } else {
          this.$http
            .post("payrollItems/updatePayrollItem", this.formData)
            .then((res) => {
              if (res.data.code === 200) {
                this.getPayrollItemsList();
                this.cancel();
              } else {
                this.$message.error(res.data.data);
              }
            });
        }
      },
      // 导出
      exprotPayrollItems() {
        this.$http({
          url: "payrollItems/exprotPoi",
          method: "GET",
          responseType: "arraybuffer", // 接收二进制文件流
        }).then((res) => {
          const content = res.data;
          const blob = new Blob([content], { type: "application/octet-stream" });
          const fileName = "薪资项目.xlsx";
  
          if (typeof window.navigator.msSaveBlob !== "undefined") {
            window.navigator.msSaveBlob(blob, fileName);
          } else {
            const fileUrl = window.URL.createObjectURL(blob);
            const a = document.createElement("a");
            a.href = fileUrl;
            a.target = "_blank";
            a.download = fileName;
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
          }
        });
      },
      importPoi(){
          const inputFile = this.$refs.file.files[0];
          console.log(inputFile)
          var formDate =new FormData()
          formDate.set("file",inputFile)
          this.$http.post("payrollItems/importPoi",formDate,{headers:{
              "Content-Type": "multipart/form-data" 
          }}).then(res=>{
              if(res.data.code===200){
                  this.$message(res.data.data)
                  this.getPayrollItemsList()
              }else{
                  this.$message.error(res.data.data)
              }
              
          })
      },
      // 获取薪资项目列表
      getPayrollItemsList() {
        this.$http
          .post("payrollItems/getPayrollItemsList", this.form)
          .then((res) => {
            if (res.data.code === 200) {
              this.dataList = res.data.data.rows;
              this.total = res.data.data.total;
            } else {
              this.$message.error(res.data.data);
            }
          });
      },
      // 取消
      cancel() {
        this.dialogVisible = false;
        this.formData = {
          id: undefined,
          projectName: "",
          projectType: "",
          roundingRules: "",
          retain: "",
          remark: "",
        };
      },
      // 回显薪资项目
      findPayrollItems(id) {
        this.$http("payrollItems/findPayrollItems", {
          params: {
            id: id,
          },
        }).then((res) => {
          if (res.data.code === 200) {
            this.formData = res.data.data;
            this.formData.projectType = res.data.data.projectType + "";
            this.formData.roundingRules = res.data.data.roundingRules + "";
            this.dialogVisible = true;
            this.sub = "修改项目";
          } else {
            this.$message.error(res.data.data);
          }
        });
      },
      // 删除薪资项目
      deletePayrollItems(id) {
        this.$confirm("是否删除此项目, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          this.$http("payrollItems/deletePayrollItems", {
            params: {
              id: id,
            },
          }).then((res) => {
            if (res.data.code === 200) {
              this.$message(res.data.data);
              this.getPayrollItemsList();
            } else {
              this.$message.error(res.data.data);
            }
          });
        });
      },
      //每页条数改变时触发 选择一页显示多少行
      handleSizeChange(val) {
        this.form.currentPage = 1;
        this.form.pageSize = val;
        this.getSalaryList();
      },
      //当前页改变时触发 跳转其他页
      handleCurrentChange(val) {
        this.form.currentPage = val;
        this.getSalaryList();
      },
      handleClose(done) {
        this.$confirm("确认关闭？")
          .then((_) => {
            done();
            this.cancel();
          })
          .catch((_) => {});
      },
    },
  };
  </script>
    
    <style scoped>
  .block {
    padding-left: 800px;
  }
  .el-row {
    margin-bottom: 20px;
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: white;
    height: 90px;
  }
  .bg-purple-dark-two {
    background: white;
    height: 600px;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  .file-box {
      display: inline-block;
      position: relative;
      overflow: hidden;
      color: black;
      background-color: rgb(255, 255, 255);
  }
   
  .file-btn {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      outline: none;
      filter: alpha(opacity=0);
      -moz-opacity: 0;
      -khtml-opacity: 0;
      opacity: 0;
  }
  </style>